import React, { useState } from "react";
import { useProjectIdUrl } from "./util";
import { useAddKanban } from "server";
import { Container } from "./kanban-column";
import { Input } from "antd";

const CreateKanban = () => {
  const [name, setNmae] = useState("");
  const projectId = useProjectIdUrl();
  const { mutateAsync: addKanban } = useAddKanban();

  const submit = async () => {
    await addKanban({ name, projectId });
    setNmae("");
  };

  return (
    <Container>
      <Input
        value={name}
        onChange={(evt) => setNmae(evt.target.value)}
        onPressEnter={submit}
        placeholder="新建看板名称"
        size="large"
      />
    </Container>
  );
};

export default CreateKanban;
